<template>
  <div>
    <vxe-table
      align="left"
      :data="tableData"
      size="small"
      border
      min-height="0"
    >
      <vxe-column field="code" title="申请ID" />
      <vxe-column field="type" title="申请类型" />
      <vxe-column field="info" title="关联信息" width="30%">
        <template #default="{ row }">
          <el-link type="primary">{{ row.info }}</el-link>
        </template>
      </vxe-column>
      <vxe-column field="status" title="申请状态" />
      <vxe-column field="dept" title="提交部门" />
      <vxe-column field="people" title="提交人" />
      <vxe-column field="time" title="提交时间" />
      <!-- <vxe-column title="操作" width="80">
        <template #default="{ row }">
          <el-link type="primary">详情</el-link>
        </template>
      </vxe-column> -->
    </vxe-table>
    <el-pagination
      background
      :current-page="queryForm.pageNo"
      :layout="layout"
      :page-size="queryForm.pageSize"
      :total="total"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    />
  </div>
</template>

<script lang="ts">
  import { defineComponent } from 'vue'

  export default defineComponent({
    setup() {
      const state = reactive({
        tableData: [
          {
            code: 'XXXXXX',
            type: '项目立项建议',
            info: '大尺寸BH-VDT垂直钻井工具在万米科探井的支撑应用【ID：12345678】',
            status: 'XXXXXX',
            dept: 'XXXXXX',
            people: 'XXXXXX',
            time: '2023/10/02 10:00',
          },
          {
            code: 'XXXXXX',
            type: '项目立项建议',
            info: '大尺寸BH-VDT垂直钻井工具在万米科探井的支撑应用【ID：12345678】',
            status: 'XXXXXX',
            dept: 'XXXXXX',
            people: 'XXXXXX',
            time: '2023/10/02 10:00',
          },
          {
            code: 'XXXXXX',
            type: '项目立项建议',
            info: '大尺寸BH-VDT垂直钻井工具在万米科探井的支撑应用【ID：12345678】',
            status: 'XXXXXX',
            dept: 'XXXXXX',
            people: 'XXXXXX',
            time: '2023/10/02 10:00',
          },
        ],
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        queryForm: {
          pageNo: 1,
          pageSize: 30,
        },
      })

      const handleSizeChange = (val) => {
        state.queryForm.pageSize = val
      }

      const handleCurrentChange = (val) => {
        state.queryForm.pageNo = val
      }

      return {
        ...toRefs(state),
        handleSizeChange,
        handleCurrentChange,
      }
    },
  })
</script>

<style scoped></style>
